<template>
  <view class="pick-up-management">
    <nav-bar left-text="取件"></nav-bar>
    <bg-set background="#f2f3f7" />
    <scroll-view
      scroll-y="true"
      class="scroll-y"
      @scrolltolower="scrolltolower"
    >
      <view>
        <template v-if="loading">
          <loading />
        </template>
        <template
          v-else-if="
            !loading &&
            pickUpData.filter((item) => item.signForStatus === 2).length >= 1
          "
        >
          <pick-up-card
            v-for="(item, index) in pickUpData.filter(
              (item) => item.signForStatus === 2
            )"
            :key="item.id"
            :card-data="item"
            :is-confirmed="item.isConfirmed"
            @openPopup="openPopup(index)"
            @changeSignForStatusAndSignForTime="
              changeSignForStatusAndSignForTime
            "
          />
        </template>
        <template
          v-else-if="
            !loading &&
            pickUpData.filter((item) => item.signForStatus === 2).length ===
              0 &&
            success
          "
        >
          <loading-empty
            tip="你还没有快递呢~"
            :show-button="false"
          />
        </template>
        <template
          v-else-if="
            !loading &&
            pickUpData.filter((item) => item.signForStatus === 2).length ===
              0 &&
            !success
          "
          ><loading-error
        /></template>
        <scroll-view-holder />
      </view>
    </scroll-view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        type="warn"
        title="请核对你的身份"
        :content="`请确认你的姓名：${userName},&nbsp;&nbsp;&nbsp;&nbsp;手机号码：${userPhone}`"
        :before-close="true"
        @close="close"
        @confirm="confirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import storageOperation from "/utils/index";
import profileAPI from "/api/modules/profile";
import PickUpCard from "./components/pick-up-card.vue";
export default {
  name: "pick-up-management",
  components: {
    PickUpCard,
  },
  data() {
    return {
      loading: false,
      success: true,
      userName: storageOperation.getStorageSync("userName").value,
      userPhone: storageOperation.getStorageSync("userPhone").value,
      pickUpData: [],
      index: 0,
    };
  },
  onShow() {
    this.getUserOrder();
  },
  methods: {
    scrolltolower() {
      uni.showToast({
        title: "我可是有底线的哈",
        duration: 2000,
        icon: "none",
        position: "top",
      });
    },
    getUserOrder() {
      this.loading = true;
      this.success = true;
      this.pickUpData = [];
      const params = { userName: this.userName, userPhone: this.userPhone };
      profileAPI
        .getUserOrder(params)
        .then((res) => {
          this.pickUpData = res.map((item) => {
            item.isConfirmed = false;
            return item;
          });
        })
        .catch((err) => {
          this.success = false;
          uni.showToast({
            title: "获取用户订单失败",
            icon: "error",
            duration: 2000,
            position: "top",
          });
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    openPopup(index) {
      this.index = index;
      this.open();
    },
    changeSignForStatusAndSignForTime() {
      this.getUserOrder();
    },
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    confirm() {
      this.pickUpData[this.index].isConfirmed = true;
      this.$refs.popup.close();
    },
  },
};
</script>
<style lang='scss' scoped>
.pick-up-management {
  position: fixed;
  width: 100%;
  height: 100vh;
  .scroll-y {
    padding: 20rpx;
    height: calc(100vh - 44rpx);
    box-sizing: border-box;
  }
}
</style>